<template>
  <div class="app-container">
    <div
      v-show="
        !detailInfo.visible &&
        !deviceDetailInfo.visible &&
        !modifyInfo.visible &&
        !deviceModifyInfo.visible
      "
    >
      <!-- 条件栏 -->
      <NewPageFilter
        v-model:query="filterInfo.query"
        :filter-list="filterInfo.searchList"
        :clear-type="clearType"
        :filter-btn="filterInfo.srarchBtn"
      >
      </NewPageFilter>
      <!-- 表格 -->
      <table-container
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :api="getSaleOrderPage"
        :query="filterInfo.query"
        :field-list="tableInfo.fieldList"
        :check-box="false"
        :tab-index="true"
        :handle="tableInfo.handle"
      >
        <template v-slot:col-orderNo="scope">
          <span class="slip-edit" @click="showDetail(scope.row)">{{
            scope.row.orderNo || '-'
          }}</span>
        </template>
      </table-container>
    </div>
    <modify
      v-if="modifyInfo.visible"
      v-model:visible="modifyInfo.visible"
      :pend-saleorder-id="modifyInfo.pendSaleorderId"
      :sale-order-id="modifyInfo.saleOrderId"
      :purch-type="modifyInfo.purchType"
      @returnModify="getList"
    />
    <deviceModify
      v-if="deviceModifyInfo.visible"
      v-model:visible="deviceModifyInfo.visible"
      :pend-saleorder-id="deviceModifyInfo.pendSaleorderId"
      :sale-order-id="deviceModifyInfo.saleOrderId"
      :purch-type="deviceModifyInfo.purchType"
      @returnModify="getList"
    />
    <detail
      v-if="detailInfo.visible"
      :id="detailInfo.id"
      v-model:visible="detailInfo.visible"
    />
    <deviceDetail
      v-if="deviceDetailInfo.visible"
      :id="deviceDetailInfo.id"
      v-model:visible="deviceDetailInfo.visible"
    />
  </div>
</template>

<script setup name="saleOrder">
import TableContainer from '@/components/TableContainer/index'
import modify from './modify'
import deviceModify from './deviceModify'
import detail from './detail'
import deviceDetail from './deviceDetail'
import { getSaleOrderPage, deleteSaleOrder } from '@/api/supplier.js'

const { proxy } = getCurrentInstance()
const emit = defineEmits()
// 过滤相关配置
const filterInfo = reactive({
  copyQuery: {},
  query: {
    sort: 'order_no desc',
    status: '',
    purchProductType: '',
    orderNoLike: '',
    purchNoLike: '',
  },
  searchList: [
    {
      label: '状态',
      value: 'status',
      componentType: 'select-model',
      code: 'sale_order_status',
      event: search,
      clearable: true,
    },
    {
      label: '销售类型',
      value: 'saleProductType',
      componentType: 'select-model',
      code: 'order_product_type',
      event: search,
      clearable: true,
    },
    {
      componentType: 'input',
      label: '销售单',
      value: 'orderNoLike',
      clearable: true,
      event: search,
    },
    {
      componentType: 'input',
      label: '采购单号',
      value: 'purchNoLike',
      clearable: true,
      event: search,
    },
  ],
  srarchBtn: [
    { type: 'button', label: '搜索', event: search },
    { type: 'button', label: '重置', event: clearSearch },
  ],
})
// 表格相关
const tableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  data: [],
  selections: [],
  fieldList: [
    { label: '销售单号', value: 'orderNo', type: 'slot' },
    { label: '采购单号', value: 'purchNo' },
    { label: '状态', value: 'statusValue' },
    { label: '销售类型', value: 'saleProductTypeValue' },
    { label: '创建时间', value: 'createTime' },
    { label: '备注', value: 'remark' },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '120',
    btList: [
      {
        label: '生成发货单',
        event: creatDeliver,
        show: true,
        ifRender: (row) => {
          return (row.status === 1 || row.status === 2) && !row.deliverFlag
        },
      },
      {
        label: '修改',
        event: update,
        show: true,
        ifRender: (row) => {
          return row.status === 1
        },
      },
      {
        label: '删除',
        event: remove,
        popconfirmText: '删除后将改变数据,是否继续？',
        show: true,
        ifRender: (row) => {
          return row.status === 1
        },
      },
    ],
  },
})
//修改或新增弹框信息
const modifyInfo = reactive({
  visible: false,
  pendSaleorderId: '',
  saleOrderId: '',
  purchType: '',
})
const deviceModifyInfo = reactive({
  visible: false,
  pendSaleorderId: '',
  saleOrderId: '',
  purchType: '',
})
const detailInfo = reactive({
  visible: false,
  id: '',
})
const deviceDetailInfo = reactive({
  visible: false,
  id: '',
})
const clearType = ref(true)

watch(
  () => proxy.$route,
  async (route) => {
    const params = route.params
    if ((await route.name) === 'saleOrder') {
      if (await Object.keys(params).length) {
        modifyInfo.visible = false
        modifyInfo.saleOrderId = ''
        modifyInfo.pendSaleorderId = ''
        modifyInfo.purchType = ''
        deviceModifyInfo.visible = false
        deviceModifyInfo.saleOrderId = ''
        deviceModifyInfo.pendSaleorderId = ''
        deviceModifyInfo.purchType = ''
        if (await params.id) {
          if (params.purchProductType == 1) {
            modifyInfo.visible = true
            modifyInfo.pendSaleorderId = params.id
            modifyInfo.saleOrderId = ''
            modifyInfo.purchType = params.purchType
          } else if (params.purchProductType == 2) {
            deviceModifyInfo.visible = true
            deviceModifyInfo.pendSaleorderId = params.id
            deviceModifyInfo.saleOrderId = ''
            deviceModifyInfo.purchType = params.purchType
          }
          detailInfo.visible = false
          detailInfo.id = ''
        }
      }
    }
  },
  {
    immediate: true,
  }
)

onMounted(() => {
  filterInfo.copyQuery = proxy.$fn.deepClone(filterInfo.query)
  getList()
})

function purchOrderModifyBack() {
  getList()
}
// 获取列表
function getList() {
  tableInfo.refresh = Math.random()
}
// 搜索
function search() {
  // 重置分页
  tableInfo.initCurpage = Math.random()
  tableInfo.refresh = Math.random()
}
//查看明细
function showDetail(row) {
  if (row.saleProductType == 1) {
    detailInfo.id = row.id
    detailInfo.visible = true
  } else if (row.saleProductType == 2) {
    deviceDetailInfo.id = row.id
    deviceDetailInfo.visible = true
  }
}
function update(row) {
  if (row.saleProductType == 1) {
    modifyInfo.visible = true
    modifyInfo.pendSaleorderId = ''
    modifyInfo.purchType = row.purchType
    modifyInfo.saleOrderId = row.id
  } else if (row.saleProductType == 2) {
    deviceModifyInfo.visible = true
    deviceModifyInfo.pendSaleorderId = ''
    deviceModifyInfo.purchType = row.purchType
    deviceModifyInfo.saleOrderId = row.id
  }
}
function creatDeliver(row) {
  proxy.$router.push({
    name: 'deliverOrder',
    params: row,
  })
}
function clearSearch() {
  clearType.value = !clearType.value
  filterInfo.query = proxy.$fn.deepClone(filterInfo.copyQuery)
  getList()
}
function remove(row) {
  deleteSaleOrder([row.id]).then((res) => {
    if (res && res.success) {
      getList()
    }
  })
}
</script>

<style scoped lang="scss">
:deep(.el-table .warning-row) {
  background: #f5e4e4;
}

// :deep(.el-table__body tr.hover-row > td) {
//   background-color: transparent !important;
// }
</style>
